<!--现场论证  -->
<template>
  <div class="argument-dialog">
    <el-dialog
      title="现场论证"
      :visible.sync="argumentShow"
      width="628px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      custom-class="dialog-box"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="118px"
      >
        <el-form-item label="审核结果" prop="approvalStatus">
          <el-radio-group v-model="ruleForm.approvalStatus">
            <el-radio :label="17">通过</el-radio>
            <el-radio :label="19">退回重申</el-radio>
            <el-radio :label="18">通过需修改</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="approvalOpinion">
          <el-input
            type="textarea"
            v-model="ruleForm.approvalOpinion"
            maxlength="1000"
            show-word-limit
            style="width: 100%;"
          ></el-input>
        </el-form-item>
        <div class="select-template">
          <el-dropdown trigger="click" @command="handleCommand" placement="top">
            <span class="el-dropdown-link">
              选择模版<i class="icon-arrow-down el-icon-folder-remove"></i>
            </span>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item icon="el-icon-circle-check"
              v-for="dict in selectDemoList"
              :key="dict.dictValue"
              :command="dict.dictValue"
              >{{dict.dictLabel}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-form-item label="专家签字扫描" prop="approvalDatabase.fileName">
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="upload.uploadUrl"
            :on-progress="handleFileUploadFive"
            :on-success="handleFileFive"
            :headers="upload.headers"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :limit="1"
          >
           <el-input v-model="ruleForm.approvalDatabase.fileName" style="width:100%" placeholder="请选择文件"></el-input>
            <div class="img-box">
              <img
                src="@/assets/images/icon_form_16_select_arrdown.png"
                alt=""
              />
            </div>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>       
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getApprovalAdd } from "@/api/manage/manage";
import { getToken } from "@/utils/auth";
export default {
  name: "argumentDialog",
  props: {
    argumentShow: {
      type: Boolean,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    proid: {
      type: String,
      default: "",
    },
  },
  inject:['reload'],
  data() { 
    return {
      rules: {
        approvalStatus: [
          { required: true, message: "请选择结果", trigger: "change" },
        ],
        // approvalOpinion: [
        //   {
        //     required: true,
        //     message: "请输入审核意见",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        'approvalDatabase.fileName': [
          { required: true, message: "请上传文件", trigger: ["blur", "change"] },
        ],
      },
      ruleForm: {
        approvalStatus: "",
        approvalOpinion: "",
        approvalDatabase: {fileName:'',fileUrl:''},
      },
      fileList: [],
      upload: {
        uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", //文件地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        fileName: "请选择文件",
      },
      fileType: [
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "jpg",
        "png",
        "txt",
        "pdf",
        "zip",
        "rar",
        "7z"
      ],
      fileSize: 20,
      // 选择模板数据字典
      selectDemoList:[
        { dictValue: "方案描述不充分1", dictLabel: "方案描述不充分1" },
        { dictValue: "方案描述不充分2", dictLabel: "方案描述不充分2" },
        { dictValue: "方案描述不充分3", dictLabel: "方案描述不充分3" },
      ]
    };
  },
  methods: {
    /** 取消按钮 */
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.$emit("changeShowDialog", "false"); //调用父组件的自定义事件，并传值
    },
    /** 确定按钮 */
    submitForm() {
      this.ruleForm.projectId = this.proid;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          getApprovalAdd(this.ruleForm).then((res) => {
            if (res) {
              this.$refs.ruleForm.resetFields();
              this.$emit("changeShowDialog", "false");
              this.reload()
            }
          });
        }
      });
    },
    handleFileUploadFive(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileFive(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.$refs.upload.clearFiles();
      if(response.code!=500){
        this.ruleForm.approvalDatabase.fileName = file.name;
        this.ruleForm.approvalDatabase.fileUrl = response.data.fileUrl
        this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
      }else{
        this.$message.error(response.msg)
      }
    },
    //文件上传前
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    // 选择模板内容
    handleCommand(command) {
      // console.log(9999,command);
      this.ruleForm.approvalOpinion = command
    },
  },
};
</script>

<style lang="scss" >
.argument-dialog .el-form-item .el-input__inner {
  width: 100%;
}
.argument-dialog .el-form-item .el-textarea__inner {
  width: 100%;
}
.argument-dialog{
  // 下载模板样式修改
  .select-template {
    .el-dropdown-link{
      color: #3171ee;
    }
    .icon-arrow-down{
      margin-left: 10px;
      color: #3171ee;
    }
    // width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: LEFT;
    color: #3171ee;
    margin-left: 30%;
    margin-bottom: 20px;
    cursor: pointer;
    img {
      margin-left: 10px;
    }
  }
    // 文件上传
  .upload-demo {
    .el-upload-list {
      display: none;
    }
    .el-upload {
      display: flex;
      .el-input__inner{
        width: 100%;
      }
    }
    .img-box {
      height: 37px;
      width: 36px;
      line-height: 36px;
      background: #0d72ff;
      text-align: center;
      border-radius: 0px 4px 4px 0px;
      position: absolute;
      right: -1%;
      top: 1px;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>